<template>
  <!--兑换奖品店家发货==》 发货页面
  -->
  <div class="welMain">
    <h3 class="drawInfo">兑换信息</h3>
    <el-form :model="formInline" ref="postForm" :rules="rulesInline" :disabled="isDisabled"
             :label-position="labelPosition" label-width="120px" class="searchDivFirst" size="mini">
      <div class="baseInfo">
        <div class="baseInfoRight" style="width: 100%;">
          <el-form-item label="积分商品" style="width: 100%">
            <el-input v-model="formInline.name" placeholder="请输入积分商品" style="width: 100%;"></el-input>
          </el-form-item>
        </div>
        <div class="baseInfoLeft">
          <el-form-item label=" 积分兑换">
            <el-input v-model="formInline.redeemIntegral" placeholder="请输入积分兑换" style="width: 186px"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="baseInfo">
        <div class="baseInfoRight" style="width: 100%;">
          <div class="baseInfoCenter">
            <div class="baseInfoCenterBox">
              <!--              这里数据要处理  -->
              <el-form-item label=" 积分+现金" :inline="true" prop="integralCash1">
                <el-input v-model="formInline.integralCash1" placeholder="请输入积分 "></el-input>
              </el-form-item>
              <el-form-item label="  " :inline="true" prop="integralCash1">
                <el-input v-model="formInline.integralCash2" placeholder="请输入现金"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label=" 兑换数量">
                <el-input v-model="formInline.exchangeCount" placeholder="请输入兑换数量"></el-input>
              </el-form-item>
              <el-form-item label="  兑换时间" :inline="true">
                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.redeemTime"
                                style="width: 186px"></el-date-picker>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="baseInfoLeft">
          <el-form-item label="是否兑换">
            <el-select v-model="formInline.redeemStatus" placeholder="活动区域" style="width: 186px">
              <el-option
                v-for="item in redeemStatusOption "
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" 会员">
            <el-input v-model="formInline.account" placeholder="请输入积分商品" style="width: 186px"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="baseInfo">
        <div class="baseInfoRight" style="width: 100%;">
          <div class="baseInfoCenter">
            <div>
              <el-form-item label=" 收件人姓名">
                <el-input v-model="formInline.recipientName" placeholder="请输入积分商品"></el-input>
              </el-form-item>
            </div>
            <div class="baseInfoCenterBox">
              <el-form-item label=" 收件人手机号" :inline="true">
                <el-input v-model="formInline.recipientPhone" placeholder="请输入积分商品"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="baseInfoLeft">

        </div>
      </div>
      <div class="baseInfo">
        <div class="baseInfoRight" style="width: 100%;">
          <el-form-item label=" 收货地址" style="width: 100%">
            <el-input v-model="formInline.recipientAddress" placeholder="请输入积分商品" style="width: 100%;"></el-input>
          </el-form-item>
        </div>
        <div class="baseInfoLeft">
          <el-form-item label=" 收件人邮编">
            <!--            没有对应字段-->
            <el-input v-model="formInline.recipientCode" placeholder="请输入积分商品" style="width: 186px"></el-input>
          </el-form-item>
        </div>
      </div>
      <el-form-item label=" 买家留言" style="width: 90%">
        <el-input v-model="formInline.buyerMessage" placeholder="请输入积分商品" style="width: 100%;"></el-input>
      </el-form-item>
    </el-form>
    <h3 class="drawInfo">发货信息</h3>
    <el-form :model="formInline" ref="postForm" :rules="rulesInline"
             :label-position="labelPosition" label-width="120px" class="searchDivFirst" size="mini">
      <div class="baseInfo">
        <div class="baseInfoRight" style="width: 100%;">
          <div class="baseInfoCenter">
            <div>
              <el-form-item label=" 物流公司" prop="logisticsCompany">
                <el-input v-model="formInline.logisticsCompany" placeholder="请选择物流公司"></el-input>
              </el-form-item>
            </div>
            <div class="baseInfoCenterBox">
              <el-form-item label=" 物流联系电话" :inline="true" prop="logisticsPhone">
                <el-input v-model="formInline.logisticsPhone" placeholder="请输入物流联系电话"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="baseInfoLeft">
          <el-form-item label=" 物流单号" prop="logisticsNumber">
            <el-input v-model="formInline.logisticsNumber" placeholder="请输入物流单号" style="width: 186px"></el-input>
          </el-form-item>
        </div>
      </div>

    </el-form>
    <div class="buttonLast">
      <el-button size="mini" type="primary" @click="handleClose">关闭</el-button>
      <el-button size="mini" type="primary" @click="handleStore">保存</el-button>
    </div>
  </div>
</template>

<script>
  import {redeemrecordQueryById, redeemrecordDelivery} from '@/api/api.js';

  export default {
    data() {
      return {
        isDisabled: false,
        redeemStatusOption: [{
          value: '0',
          label: '否'
        }, {
          value: '1',
          label: '是'
        }
        ],
        fateValue: false,
        formInline: {
          endTime: "",
          beginTime: '',
          name: '',
          current: 1,
          size: 10,
          drawStatus: "",
          code: '',
        },
        rulesInline: {
          integralCash1: [
            {required: true, message: '请输入积分 ', trigger: 'blur'},
          ],
          integralCash2: [
            {required: true, message: '请输入 现金', trigger: 'blur'},
          ],
          logisticsCompany: [
            {required: true, message: '请输入物流公司', trigger: 'blur'}
          ],
          logisticsPhone: [
            {required: true, message: '请输入物流联系电话', trigger: 'blur'},
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '请输入正确的手机号码格式',
              trigger: 'blur'
            }
          ],
          logisticsNumber: [
            {required: true, message: '请输入物流单号', trigger: 'blur'}
          ],
        },
        labelPosition: 'right'
      }
    },
    created() {
      this.getQueryId()
    },
    methods: {
      /** 关闭 */
      handleClose() {
        this.$router.back(-1)
      },
      /** 保存*/
      handleStore() {
        this.formInline.integralCash = this.formInline.integralCash1 + this.formInline.integralCash2;
        this.$refs.postForm.validate((valid) => {
          if (valid) {
            redeemrecordDelivery(this.formInline).then(response => {
              if (response.code === 0) {
                this.$message({
                  message: response.msg,
                  type: 'success'
                });
                this.$router.back(-1)
              } else {
                this.$message({
                  message: response.msg,
                  type: 'warning'
                });
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /*
      * 获取详情
      * */
      getQueryId() {
        //兑换信息不可修改
        // this.isDisabled = true
        redeemrecordQueryById(this.$route.query.id).then(response => {
          if (response.code === 0) {
            this.formInline = response.data;
          } else {
            this.$message({
              message: response.msg,
              type: 'warning'
            });
          }
        });

      }
    },
    computed: {},
  }
</script>

<style lang="less" scoped>
  /*.welMain {*/
  /*/ / font-family: '楷体';*/
  /*}*/

  .baseInfo {
    display: flex;
    justify-content: space-between;
  }

  .baseInfoRight {
    width: 40%;
    /*border: 1px solid #eeeeee;*/
  }

  .baseInfoLeft {
    width: 50%;
    /*border: 1px solid #eeeeee;*/
  }

  .buttonLast {
    display: flex;
    justify-content: center;
    margin: 10px;
  }

  .searchDivFirst {
    padding: 10px;
    border-bottom: 1px solid #eeeeee;
    /*display: flex;*/
    /*justify-content: space-between;*/
  }

  .searchDivleft {
    width: 25%;
    /*border : 1px solid #eeeeee;*/
  }

  .searchDivright {
    width: 25%;
    /*border : 1px solid #eeeeee;*/
  }

  .baseInfoCenter {
    display: flex;
    justify-content: space-between;
  }

  .lastDivTitle {
    padding: 0 10px;
  }

  .buttonDiv {
    padding: 10px;
  }

  .buttonStyle {
    margin: 0 10px;
  }

  .drawInfo {
    padding: 10px;
    color: #585555;
    border-bottom: 1px solid #eeeeee;
  }
</style>
